<template>
  <div>
    <div class="content">
      <h3 :class="{ active: row == 1 }" @click="row1">我的报告</h3>
      <h3 :class="{ active: row == 2 }" @click="row2">我的认证</h3>
      <h3 :class="{ active: row == 3 }" @click="row3">风险扫描记录</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      row: 1,
    };
  },
  mounted() {
    if (localStorage.getItem("rowss") != undefined) {
      this.row = localStorage.getItem("rowss");
      if (localStorage.getItem("rowss") == 1) {
        if (this.$route.path == "/myReport") return;
        this.$router.push("/myReport?row=1");
      } else if (localStorage.getItem("rowss") == 2) {
        if (this.$route.path == "/myAuthentication") return;
        this.$router.push("/myAuthentication?row=2");
      } else if (localStorage.getItem("rowss") == 3) {
        if (this.$route.path == "/sweepRecord") return;
        this.$router.push("/sweepRecord?row=3");
      }
    }
  },
  methods: {
    row1() {
      if (this.$route.path == "/myReport") return;
      this.$router.push("/myReport?row=1");
      localStorage.setItem("rowss", 1);
    },
    row2() {
      if (this.$route.path == "/myAuthentication") return;
      this.$router.push("/myAuthentication?row=2");
      localStorage.setItem("rowss", 2);
    },
    row3() {
      if (this.$route.path == "/sweepRecord") return;
      this.$router.push("/sweepRecord?row=3");
      localStorage.setItem("rowss", 3);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 50px;
  margin-bottom: 35px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  // background-color: #f00;
  margin-bottom: 21px;
  border-bottom: 1px solid #e8e8e8;
  h3 {
    height: 32px;
    width: 120px;
    line-height: 28px;
    text-align: center;
    box-sizing: border-box;
    margin-right: 35px;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #181818;

    cursor: pointer;
    &.active {
      box-sizing: border-box;
      border-bottom: 2px solid #0a7be0;
      color: #0a7be0;
    }
  }
}
</style>
